<template>
	<div class="xh-table-cont">
		<flexbox class="xh-tools" v-if="headTools">
			<el-button v-if="headTools.add" type="text" @click="handleAddRow"
				>新增一行</el-button
			>
			<el-button v-if="headTools.delete" type="text" @click="handleDeleteRow"
				>删除所选行</el-button
			>
		</flexbox>
		<el-table
			highlight-current-row
			border
			fit
			v-loading="loading"
			:data="dataValue"
			max-height="370"
			style="width: 100%"
			@selection-change="handleSelectionChange"
			class="xh-table"
		>
			<el-table-column type="selection" v-if="headTools" width="40" />
			<el-table-column v-for="field in fields" :key="field.key">
				<template slot="header" slot-scope="scope">
					<div class="x-smoll-table__lb-i" :class="getHeaderClass(field)">
						{{ field.data.name }}
					</div>
				</template>
				<template slot-scope="scope">
					<!-- <span v-if="field.disabled">{{ scope.row[field.key] }}</span> -->
					<XhElement
						:type="field.data.formType"
						:item="field"
						:value="scope.row[field.key]"
						:radio="item.radio"
						:disabled="field.disabled"
						:allow-create="item.allowCreate"
						:filterable="item.filterable"
						:multiple="item.multiple"
						:action="action"
						:crm-type="crmType"
						:class="{
							errorTd: errorTd.find(
								(err) => err.row == scope.row && err.field == field
							)
						}"
						@value-change="handleValueChange(scope, field, arguments)"
					/>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import arrayMixin from './arrayMixin'
import XhElement from './XhElement.vue'
import decorateField from './formFn/decorateField'

export default {
	inject: {
		XhForm: 'XhForm'
	},
	mounted() {
		this.fields = this.item.append.map(decorateField)
	},
	components: {
		XhElement
	},
	mixins: [arrayMixin],
	props: {
		// 操作类型
		action: {
			type: Object,
			default: () => {
				return {
					type: 'save',
					id: '',
					data: {} //编辑所需信息
				}
			}
		},
		// CRM类型
		crmType: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			fields: [],
			selection: [], // 数组选中
			loading: false,

			errorTd: [] // 标红单元格
		}
	},
	methods: {
		getHeaderClass(field) {
			let required = true
			if (!field.data.isNull) {
				required = false
			} else if (this.dataValue.length == 0) {
				required = this.item.data.isNull
			}
			return { rqd: required }
		},
		handleValueChange({ row }, { key }, [data]) {
			row[key] = data.value
			this.valueChange(this.dataValue)
		},
		validate() {
			let errorfieldnames = []
			this.errorTd = []
			this.fields.forEach((field) => {
				if (field.data.isNull == 1) {
					this.dataValue.forEach((row) => {
						if (!row[field.key]) {
							errorfieldnames.push(field.data.name)
							this.errorTd.push({ row, field })
						}
					})
				}
			})
			if (errorfieldnames.length) {
				return {
					result: false,
					message: errorfieldnames.join('/') + '为必填项'
				}
			}
			return {
				result: true
			}
		},
		handleSelectionChange(val) {
			this.selection = val
		},
		handleAddRow() {
			this.dataValue.push(
				this.fields.reduce((row, f) => {
					row[f.key] = f.value
					return row
				}, {})
			)
			this.valueChange(this.dataValue)
		},
		handleDeleteRow() {
			if (!this.selection.length) {
				this.$message.warning('请勾选要删除的行')
				return
			}
			this.selection.forEach((del) => {
				let i = this.dataValue.findIndex((row) => row === del)
				this.dataValue.splice(i, 1)
			})
			this.valueChange(this.dataValue)
		}
		// getFields(sourceModel) {
		// 	var crmFields = []
		// 	for (let index = 0; index < sourceModel.length; index++) {
		// 		const item = sourceModel[index]
		// 		/**
		// 		 * 表单数据
		// 		 */
		// 		if (item.formType == 'category') {
		// 			/** 产品分类 */
		// 			let params = {}
		// 			params['key'] = item.fieldName
		// 			params['data'] = item
		// 			if (
		// 				this.action.type == 'update' ||
		// 				this.action.type == 'copy' ||
		// 				// 2020-7-20 或进行意向转化为客户操作
		// 				(this.action.type == 'transform' && item.value)
		// 			) {
		// 				const value = JSON.parse(item.value)
		// 				params['value'] = value
		// 					? value.map(function (item, index, array) {
		// 							return parseInt(item)
		// 					  })
		// 					: []
		// 			} else {
		// 				params['value'] = []
		// 			}
		// 			params['disabled'] = false // 是否可交互
		// 			params['placeholder'] = item.placeholder
		// 			crmFields.push(params)
		// 		} else if (item.formType == 'group') {
		// 			let params = {}
		// 			params['value'] = item.value || {}
		// 			params['childrens'] = item.childrens || []
		// 			params['key'] = item.fieldName
		// 			params['data'] = item
		// 			params['disabled'] = item.disabled // 是否可交互
		// 			params['placeholder'] = item.placeholder
		// 			crmFields.push(params)
		// 		} else if (item.formType == 'unit') {
		// 			let params = {}
		// 			params['units'] = item.units || []
		// 			params['value'] = item.value || {
		// 				unit: params.units.length ? params.units[0].value : null,
		// 				val: ''
		// 			}
		// 			params['key'] = item.fieldName
		// 			params['data'] = item
		// 			params['disabled'] = item.disabled // 是否可交互
		// 			params['placeholder'] = item.placeholder
		// 			crmFields.push(params)
		// 		} else if (
		// 			item.formType == 'select' ||
		// 			item.formType == 'business_status' ||
		// 			item.formType == 'brand'
		// 		) {
		// 			let params = {}
		// 			params['allowCreate'] = Boolean(item.allowCreate)
		// 			params['filterable'] = Boolean(item.filterable || item.allowCreate) // 下拉框可搜索 (item.allowCreate为真时，item.filterable必须为真)
		// 			params['value'] = item.value || ''
		// 			params['key'] = item.fieldName
		// 			params['data'] = item
		// 			params['disabled'] = Boolean(item.disabled) // 是否可交互
		// 			params['placeholder'] = item.placeholder
		// 			crmFields.push(params)
		// 		} else if (item.formType == 'multSelect') {
		// 			let params = {}
		// 			params['value'] = item.value || []
		// 			params['key'] = item.fieldName
		// 			params['data'] = item
		// 			params['disabled'] = Boolean(item.disabled) // 是否可交互
		// 			params['placeholder'] = item.placeholder
		// 			crmFields.push(params)
		// 		} else {
		// 			let params = {}
		// 			let value = item.value
		// 			if (
		// 				item.formType == 'user' ||
		// 				item.formType == 'structure' ||
		// 				item.formType == 'file' ||
		// 				item.formType == 'category' ||
		// 				item.formType == 'customer' ||
		// 				item.formType == 'business' ||
		// 				item.formType == 'contract'
		// 			) {
		// 				params['value'] = value ? objDeepCopy(value) : []
		// 			} else {
		// 				params['value'] = value || ''
		// 			}
		// 			params['key'] = item.fieldName
		// 			params['data'] = item
		// 			params['disabled'] = item.disabled // 是否可交互
		// 			params['placeholder'] = item.placeholder
		// 			crmFields.push(params)
		// 		}
		// 	}
		// 	return crmFields
		// }
	},
	computed: {
		headTools() {
			return this.item.data.tools
		}
	},
	filters: {
		typeToComponentName(formType) {
			if (
				formType == 'text' ||
				formType == 'number' ||
				formType == 'floatnumber' ||
				formType == 'mobile' ||
				formType == 'email'
			) {
				return 'XhInput'
			} else if (
				formType == 'select' ||
				formType == 'business_status' ||
				formType == 'brand'
			) {
				return 'XhSelect'
			} else if (formType == 'datetime') {
				return 'XhDateTime'
			} else if (formType == 'file') {
				return 'XhFiles'
			} else if (formType == 'category') {
				// 产品类别
				return 'XhProuctCate'
			} else if (formType == 'unit') {
				return 'XhInputUnit'
			}
		}
	}
}
</script>

<style lang="scss" scoped>
$color: #666;
$require: #f56c6c;
.xh-table-cont {
	position: relative;
}
.xh-tools {
	border: 1px solid #ddd;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	height: 40px;
	padding: 0 10px;
}
.x-smoll-table__lb-i {
	position: relative;
	font-size: 13px;
	color: $color;
	padding: 3px 0;
	&.rqd {
		padding-left: 8px;
		&::before {
			content: '*';
			color: $require;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}
.errorTd ::v-deep {
	.el-input__inner,
	.el-input__inner:focus {
		border-color: #f56c6c !important;
	}
}
::v-deep {
	.xh-table {
		.el-table--group,
		.el-table--border,
		th,
		td,
		.el-input__inner,
		.el-input__inner:focus {
			border-color: #ddd !important;
		}
		.el-table__header th {
			padding: 0;
		}
		.el-table__body td {
			padding: 5px 0;
		}
	}
}
</style>
